<template>
  <view class="container-my">
    <!-- 用户未登录 -->
    <block v-if="!token">
      <image
        src="../../static/images/default-avatar.png"
        mode="aspectFit"
        class="img"
      />
      <view class="txt">登录后可同步数据</view>
      <!-- #ifdef MP-WEIXIN -->
      <button @click="getUserInfo" class="btn" type="primary">
        微信用户一键登录
      </button>
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <button @click="getInfo" class="btn" type="primary">一键登录</button>
      <!-- #endif -->
    </block>
    <!-- 用户已登录 -->
    <block v-else>
      <image :src="userInfo.avatarUrl" mode="aspectFit" class="img" />
      <view class="txt">{{ userInfo.nickName }}</view>
      <button
        style="color: #5f5f5f"
        @click="onLogOut"
        class="btn"
        type="default"
      >
        退出登录
      </button>
    </block>
  </view>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapActions("user", ["getUserinfo", "logOut"]),
    ...mapMutations("user", ["setUserInfo", "setToken"]),
    getUserInfo() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });

      uni.getUserProfile({
        desc: "登录后可同步数据",
        success: async (res) => {
          // console.log(res);
          await this.getUserinfo(res);
          this.$emit("loginSuccess");
        },
        fail: (fail) => {
          uni.showToast({
            title: "确认取消",
            icon: "error",
          });
        },
        complete: (complete) => {
          uni.hideLoading();
        },
      });
    },
    async getInfo() {
      uni.showLoading({title:'加载中'})
      await this.getUserinfo({
        encryptedData: "BmGEMqpGI5w",
        errMsg: "getUserProfile:ok",
        iv: "c+NbINO4CuEWCBYGG2FxWw==",
        rawData:
          '{"nickName":"小慕同学","gender":1,"language":"zh_CN","city":"","province":"","country":"China","avatarUrl":"https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png"}',
        signature: "449a10f11998daf680fe546a5176e6e2973516ce",
        userInfo: {
          nickName: "小慕同学",
          gender: 1,
          language: "zh_CN",
          city: "",
          province: "",
        },
      });
      uni.hideLoading()
    },
    onLogOut() {
      uni.showModal({
        title: "提示",
        content: "退出登录了",
        success: async ({ confirm, cancel }) => {
          if (confirm) {
            await this.logOut();
          }
        },
      });
    },
  },
  computed: {
    ...mapState("user", ["token", "userInfo"]),
  },
};
</script>

<style lang="scss" scoped>
.container-my {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 25%;
  .img {
    width: 75px;
    height: 75px;
  }
  .txt {
    margin-top: 35px;
    font-size: 14px;
    color: $uni-base-color;
  }
  .btn {
    margin-top: 15px;
    width: 75%;
    font-size: 16px;
    color: #efefef;
  }
}
</style>
